<template>
  <div class="pagination">
    <el-pagination class="fr" background @size-change="handleSizeChange" :disabled="show_disabled"
      @current-change="handleCurrentChange" :current-page="currentPage" :page-size="currentPageSize" :layout="layout"
      :total="total">
    </el-pagination>
    <div class="clearfix"></div>
  </div>
</template>

<script>
export default {
  name: "pagination",
  data() {
    return {
      currentPage: 1,
      show_disabled:false,
      currentPageSize: this.pageSize,
      pageSizes: [10, 20, 50, 100],
      layout:
        this.$store.state.app.browser.col === "xs"
          ? "prev, pager, next"
          : "total, sizes, prev, pager, next, jumper"
    };
  },
  mounted(){

  },
  props: {
    pageSize: {
      type: Number,
      default: 100
    },
    total: {
      type: Number,
      default: 0
    },
    handlePage: {
      type: Function,
      default: () => {}
    }
  },
  watch: {
    "$store.state.app.browser.col"(val) {
      this.layout =
        val === "xs"
          ? "prev, pager, next"
          : "total, sizes, prev, pager, next, jumper";
    },
    total(val){
     if(val == 0){
         this.$nextTick(() => {
 $('.is-in-pagination input').attr('disabled',true)
         })
      
     }
    },
  },
  methods: {
    handleSizeChange(val) {
      this.currentPageSize = val;
      this.handlePage(this.currentPage, this.currentPageSize);
    },
    handleCurrentChange(val) {
      this.currentPage = val;

      this.handlePage(this.currentPage, this.currentPageSize);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" >
.pagination {
  margin: 10px auto;
  margin-right:30px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3D91F2 !important;
    color: #FFF;
    border-radius: 50% !important;
}
.el-pagination.is-background .btn-next.disabled, .el-pagination.is-background .btn-next:disabled, .el-pagination.is-background .btn-prev.disabled, .el-pagination.is-background .btn-prev:disabled, .el-pagination.is-background .el-pager li.disabled {
    color: #C0C4CC;
    border-radius: 50% !important;
}
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
    border-radius: 50% !important;
}
.el-pagination__editor.el-input .el-input__inner {
    height: 28px;
    border-radius: 16px;
}
</style>
